import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const signpostDocs = {
  source: {
    code: `c: component.NewSignpost(component.NewIcon("user"), "Message")
c.SetPosition = PositionTopMiddle
`
  }
}

export const signpostView= {
  "metadata": {
    "type": "signpost"
  },
  "config": {
    "trigger": {
      "metadata": {
        "type": "icon"
      },
      "config": {
        "shape": "user",
        "size": "",
        "direction": "",
        "solid": false,
        "inverse": false,
        "badge": "",
        "color": "",
        "badgeColor": "",
        "label": "",
      }
    },
    "message": "Message",
    "position": "right-middle"
  }
};

export const SignpostStoryTemplate = args => ({
  template: `<div style="padding-top: 32px;">
                <app-signpost [view]= "view"></app-signpost>
             </div>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Signpost Component</h1>
<h2>Description</h2>
<p>An Signpost component is used to display a message by clicking on a component.</p>

<p>On hover, the component will change color and cursor will change to a pointer.</p>

<h2>Example</h2>

<Meta title="Components/Signpost" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Signpost component"
         parameters={{docs: signpostDocs}}
         height="120px"
         args= {{ view: signpostView }}>
    { SignpostStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Signpost component"/>
